<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
     <!--  <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li> -->
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: false,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: true
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: true,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: false,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    var ullist = document.querySelector('#list')
    var checkbtn = document.querySelector('#checkAll')
    
   
   

   var addcontent=()=>{
      ullist.innerHTML = ''
      data.forEach((item,index)=>{
      var li = document.createElement('li')
          li.setAttribute('id',item.id)
          li.innerHTML = `<input type="checkbox" ${item.checked?'checked':''}>
                          <span>${item.title}<span>
                          ${item.collect?'<a href="javascript:;" class="collect">收藏</a>':'<a href="javascript:;" class="cancelCollect">取消收藏</a>'}
                          <a href="javascript:;" class="remove">删除</a>`
          ullist.appendChild(li)
         
      
          li.onclick =e=>{
            if(e.target.classList.contains('collect')){
                data[index].collect =false
                addcontent()
            }

            if(e.target.classList.contains('cancelCollect')){
                data[index].collect =true
                addcontent()
            }
            if(e.target.nodeName.toLowerCase()==='input'){
                  data[index].checked=e.target.checked
                  var res = checkbtns()
                  document.querySelector('#checkAll').checked= res;
            }
          }
    })
    var deletes = document.querySelectorAll('.remove')
        deletes.forEach((deletebtn,key)=>{
          deletebtn.onclick = ()=>{
            console.log(data[key])
            data.splice(key,1)
            addcontent()
          }
        })
  }

    
        checkbtn.onclick = ()=>{
          data.forEach(function(check,index){
             check.checked= checkbtn.checked
          })
          addcontent()
        }
        var checkbtns=()=>data.every(item=>item.checked)
        addcontent()
                
            
        
        
  </script>
</body>

</html>